<template>
  <div class="help-section">
    <div class="section-header">
      <h2 class="section-title">帮助中心</h2>
      <p class="section-desc">获取使用帮助，解决常见问题</p>
    </div>

    <!-- 搜索框 -->
    <div class="search-box">
      <a-input-search
        v-model:value="searchKeyword"
        placeholder="搜索问题或关键词..."
        size="large"
        @search="searchHelp"
        enter-button
      />
    </div>

    <!-- 常见问题分类 -->
    <div class="faq-categories">
      <h3 class="category-title">常见问题分类</h3>
      <a-row :gutter="16">
        <a-col :span="8" v-for="category in faqCategories" :key="category.key">
          <div class="category-card" @click="selectCategory(category.key)">
            <div class="category-icon">
              <component :is="category.icon" />
            </div>
            <div class="category-info">
              <h4 class="category-name">{{ category.name }}</h4>
              <p class="category-desc">{{ category.description }}</p>
              <span class="question-count">{{ category.count }} 个问题</span>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 问题列表 -->
    <div class="faq-list" v-if="selectedCategory">
      <h3 class="list-title">{{ getCategoryName(selectedCategory) }}</h3>
      <a-collapse v-model:activeKey="activeQuestions" ghost>
        <a-collapse-panel
          v-for="faq in filteredFaqs"
          :key="faq.id"
          :header="faq.question"
          class="faq-item"
        >
          <div class="faq-answer" v-html="faq.answer"></div>
          <div class="faq-actions">
            <a-space>
              <a-button type="link" @click="likeFaq(faq.id)">
                <LikeOutlined :class="{ liked: faq.liked }" />
                有帮助 ({{ faq.likes }})
              </a-button>
              <a-button type="link" @click="shareFaq(faq.id)">
                <ShareAltOutlined />
                分享
              </a-button>
            </a-space>
          </div>
        </a-collapse-panel>
      </a-collapse>
    </div>

    <!-- 操作指南 -->
    <div class="guide-section">
      <h3 class="guide-title">操作指南</h3>
      <a-row :gutter="16">
        <a-col :span="12" v-for="guide in operationGuides" :key="guide.id">
          <div class="guide-card">
            <div class="guide-cover">
              <img :src="guide.cover" :alt="guide.title" />
              <div class="guide-type">
                <a-tag :color="guide.type === 'video' ? 'blue' : 'green'">
                  {{ guide.type === 'video' ? '视频教程' : '图文教程' }}
                </a-tag>
              </div>
            </div>
            <div class="guide-content">
              <h4 class="guide-name">{{ guide.title }}</h4>
              <p class="guide-desc">{{ guide.description }}</p>
              <div class="guide-meta">
                <span class="guide-duration">{{ guide.duration }}</span>
                <span class="guide-views">{{ guide.views }} 次观看</span>
              </div>
              <a-button type="primary" @click="viewGuide(guide.id)">
                {{ guide.type === 'video' ? '观看视频' : '查看教程' }}
              </a-button>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 联系客服 -->
    <div class="contact-section">
      <h3 class="contact-title">联系客服</h3>
      <div class="contact-methods">
        <div class="contact-card">
          <div class="contact-icon">
            <MessageOutlined />
          </div>
          <div class="contact-info">
            <h4>在线咨询</h4>
            <p>工作时间：9:00-18:00</p>
            <a-button type="primary" @click="startChat">开始咨询</a-button>
          </div>
        </div>

        <div class="contact-card">
          <div class="contact-icon">
            <PhoneOutlined />
          </div>
          <div class="contact-info">
            <h4>客服热线</h4>
            <p>400-123-4567</p>
            <a-button @click="callService">拨打电话</a-button>
          </div>
        </div>

        <div class="contact-card">
          <div class="contact-icon">
            <MailOutlined />
          </div>
          <div class="contact-info">
            <h4>邮箱支持</h4>
            <p>support@example.com</p>
            <a-button @click="sendEmail">发送邮件</a-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 在线咨询模态框 -->
    <a-modal
      v-model:open="showChatModal"
      title="在线客服"
      width="600px"
      :footer="null"
      class="chat-modal"
    >
      <div class="chat-container">
        <div class="chat-messages">
          <div
            v-for="message in chatMessages"
            :key="message.id"
            class="chat-message"
            :class="{ 'user-message': message.sender === 'user' }"
          >
            <div class="message-avatar">
              <a-avatar v-if="message.sender === 'service'" :size="32">客服</a-avatar>
              <a-avatar v-else :size="32">我</a-avatar>
            </div>
            <div class="message-content">
              <div class="message-text">{{ message.content }}</div>
              <div class="message-time">{{ message.time }}</div>
            </div>
          </div>
        </div>

        <div class="chat-input">
          <a-input
            v-model:value="chatInput"
            placeholder="请输入您的问题..."
            @press-enter="sendMessage"
          >
            <template #suffix>
              <a-button type="link" @click="sendMessage">
                <SendOutlined />
              </a-button>
            </template>
          </a-input>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import { message } from 'ant-design-vue'
import {
  QuestionCircleOutlined,
  BookOutlined,
  SettingOutlined,
  UserOutlined,
  LikeOutlined,
  ShareAltOutlined,
  MessageOutlined,
  PhoneOutlined,
  MailOutlined,
  SendOutlined,
} from '@ant-design/icons-vue'
import image1 from '@/assets/user/course.png';
import image2 from '@/assets/user/newer.png';
// 搜索关键词
const searchKeyword = ref('')

// FAQ分类
const faqCategories = ref([
  {
    key: 'account',
    name: '账户问题',
    description: '注册、登录、密码等',
    icon: UserOutlined,
    count: 12,
  },
  {
    key: 'course',
    name: '课程学习',
    description: '课程购买、学习进度等',
    icon: BookOutlined,
    count: 18,
  },
  {
    key: 'system',
    name: '系统设置',
    description: '功能设置、技术问题等',
    icon: SettingOutlined,
    count: 8,
  },
])

// 选中的分类
const selectedCategory = ref('account')
const activeQuestions = ref([])

// FAQ数据
const faqs = ref([
  {
    id: 1,
    category: 'account',
    question: '如何修改登录密码？',
    answer:
      '<p>您可以通过以下步骤修改密码：</p><ol><li>进入个人中心</li><li>点击"安全设置"</li><li>在密码管理区域输入当前密码和新密码</li><li>点击"修改密码"完成</li></ol>',
    likes: 15,
    liked: false,
  },
  {
    id: 2,
    category: 'account',
    question: '忘记密码怎么办？',
    answer:
      '<p>如果忘记密码，请按以下方式找回：</p><ol><li>在登录页面点击"忘记密码"</li><li>输入注册时的手机号或邮箱</li><li>获取验证码</li><li>设置新密码</li></ol>',
    likes: 23,
    liked: false,
  },
  {
    id: 3,
    category: 'course',
    question: '如何查看学习进度？',
    answer:
      '<p>查看学习进度的方法：</p><ol><li>进入"我的课程"页面</li><li>选择要查看的课程</li><li>在课程详情页可以看到完整的学习进度</li></ol>',
    likes: 8,
    liked: false,
  },
])
// 操作指南
const operationGuides = ref([
  {
    id: 1,
    title: '新手入门指南',
    description: '快速了解平台功能和使用方法',
    cover: image1,
    type: 'video',
    duration: '5分钟',
    views: 1234,
  },
  {
    id: 2,
    title: '课程学习教程',
    description: '详细介绍如何高效学习课程',
    cover: image2,
    type: 'article',
    duration: '3分钟',
    views: 856,
  },
])

// 聊天相关
const showChatModal = ref(false)
const chatInput = ref('')
const chatMessages = ref([
  {
    id: 1,
    sender: 'service',
    content: '您好！我是智能客服，有什么可以帮助您的吗？',
    time: '14:30',
  },
])

// 过滤后的FAQ
const filteredFaqs = computed(() => {
  let filtered = faqs.value.filter((faq) => faq.category === selectedCategory.value)

  if (searchKeyword.value) {
    filtered = filtered.filter(
      (faq) =>
        faq.question.includes(searchKeyword.value) || faq.answer.includes(searchKeyword.value),
    )
  }

  return filtered
})

// 获取分类名称
const getCategoryName = (key: string) => {
  const category = faqCategories.value.find((cat) => cat.key === key)
  return category ? category.name : ''
}

// 选择分类
const selectCategory = (key: string) => {
  selectedCategory.value = key
  activeQuestions.value = []
}

// 搜索帮助
const searchHelp = () => {
  if (!searchKeyword.value) {
    message.warning('请输入搜索关键词')
    return
  }
  message.info(`搜索: ${searchKeyword.value}`)
}

// 点赞FAQ
const likeFaq = (id: number) => {
  const faq = faqs.value.find((f) => f.id === id)
  if (faq) {
    if (!faq.liked) {
      faq.likes++
      faq.liked = true
      message.success('感谢您的反馈！')
    }
  }
}

// 分享FAQ
const shareFaq = (id: number) => {
  message.info('分享链接已复制到剪贴板')
}

// 查看指南
const viewGuide = (id: number) => {
  message.info('正在打开教程...')
}

// 开始聊天
const startChat = () => {
  showChatModal.value = true
}

// 发送消息
const sendMessage = () => {
  if (!chatInput.value.trim()) return

  const userMessage = {
    id: Date.now(),
    sender: 'user',
    content: chatInput.value,
    time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }),
  }

  chatMessages.value.push(userMessage)
  chatInput.value = ''

  // 模拟客服回复
  setTimeout(() => {
    const serviceMessage = {
      id: Date.now() + 1,
      sender: 'service',
      content: '我已经收到您的问题，正在为您查找相关信息...',
      time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }),
    }
    chatMessages.value.push(serviceMessage)
  }, 1000)
}

// 拨打电话
const callService = () => {
  message.info('正在为您转接客服热线...')
}

// 发送邮件
const sendEmail = () => {
  message.info('正在打开邮件客户端...')
}

// 初始化
selectCategory('account')
</script>

<style scoped>
.help-section {
  max-width: 1000px;
}

.section-header {
  margin-bottom: 24px;
}

.section-title {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px 0;
}

.section-desc {
  color: #666;
  margin: 0;
}

.search-box {
  margin-bottom: 32px;
}

.faq-categories {
  margin-bottom: 32px;
}

.category-title,
.list-title,
.guide-title,
.contact-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0 0 16px 0;
}

.category-card {
  background: white;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 16px;
}

.category-card:hover {
  border-color: #20a1da;
  box-shadow: 0 2px 8px rgba(32, 161, 218, 0.1);
}

.category-icon {
  font-size: 24px;
  color: #20a1da;
  margin-bottom: 12px;
}

.category-name {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px 0;
}

.category-desc {
  color: #666;
  margin: 0 0 8px 0;
}

.question-count {
  color: #999;
  font-size: 14px;
}

.faq-list {
  margin-bottom: 32px;
}

.faq-item {
  margin-bottom: 8px;
}

.faq-answer {
  color: #666;
  line-height: 1.6;
  margin-bottom: 16px;
}

.faq-actions {
  border-top: 1px solid #f0f0f0;
  padding-top: 12px;
}

.liked {
  color: #20a1da;
}

.guide-section {
  margin-bottom: 32px;
}

.guide-card {
  background: white;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
}

.guide-cover {
  position: relative;
  height: 120px;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.guide-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.guide-type {
  position: absolute;
  top: 8px;
  right: 8px;
}

.guide-content {
  padding: 16px;
}

.guide-name {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px 0;
}

.guide-desc {
  color: #666;
  margin: 0 0 12px 0;
}

.guide-meta {
  color: #999;
  font-size: 14px;
  margin-bottom: 12px;
}

.guide-meta span {
  margin-right: 16px;
}

.contact-section {
  margin-bottom: 32px;
}

.contact-methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

.contact-card {
  background: white;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  padding: 24px;
  text-align: center;
}

.contact-icon {
  font-size: 32px;
  color: #20a1da;
  margin-bottom: 16px;
}

.contact-info h4 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px 0;
}

.contact-info p {
  color: #666;
  margin: 0 0 16px 0;
}

.chat-container {
  height: 400px;
  display: flex;
  flex-direction: column;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 0;
  border-bottom: 1px solid #f0f0f0;
}

.chat-message {
  display: flex;
  margin-bottom: 16px;
}

.user-message {
  flex-direction: row-reverse;
}

.message-avatar {
  margin: 0 8px;
}

.message-content {
  max-width: 70%;
}

.user-message .message-content {
  text-align: right;
}

.message-text {
  background: #f5f5f5;
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 4px;
}

.user-message .message-text {
  background: #20a1da;
  color: white;
}

.message-time {
  font-size: 12px;
  color: #999;
}

.chat-input {
  padding: 16px 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .contact-methods {
    grid-template-columns: 1fr;
  }

  .guide-card {
    margin-bottom: 16px;
  }

  :deep(.ant-col) {
    width: 100% !important;
    margin-bottom: 16px;
  }
}
</style>
